<template>
  <div class="date-picker">
    <el-date-picker
      v-model="startTime"
      type="date"
      size="mini"
      style="width: 140px"
      placeholder="选择日期"
      format="yyyy - MM - dd"
      value-format="yyyy-MM-dd"
    >
    </el-date-picker>
    <div style="margin: 0 5px">至</div>
    <el-date-picker
      v-model="endTime"
      type="date"
      size="mini"
      style="width: 140px"
      format="yyyy - MM - dd"
      value-format="yyyy-MM-dd"
      placeholder="结束日期"
    >
    </el-date-picker>
  </div>
</template>
<script>
export default {
  name: "DatePicker",
  props: {},
  watch: {
    startTime: {
      handler(newValue, oldVal) {
        this.changeTime();
      },
      deep: true,
      // immediate: true,
    },
    endTime: {
      handler(newValue, oldVal) {
        this.changeTime();
      },
      deep: true,
      // immediate: true,
    },
  },
  data() {
    return {
      startTime: undefined,
      endTime: undefined,
    };
  },
  created() {},
  methods: {
    // 传值
    changeTime() {
      let startTimeAndEndTime = {
        startTime: this.startTime,
        endTime: this.endTime,
      };
      this.$emit("changeDateTime", startTimeAndEndTime);
    },
  },
};
</script>
<style lang="scss" scoped>
.date-picker {
  display: flex;
  align-items: center;
  font-size: 14px;
}
</style>
